<template>
  <div class="demo">
    <div class="demo-title">响应式的栅格列表</div>
    <div class="demo-content">
      <List
        :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
        :data-source="data"
      >
        <template #renderItem="{ item }">
          <List.Item>
            <Card :title="item.title">Card content</Card>
          </List.Item>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Card from '@sscd/card';
  import List from '@sscd/list';
  interface DataItem {
    title: string;
  }
  const data: DataItem[] = [
    { title: 'Title 1' },
    { title: 'Title 2' },
    { title: 'Title 3' },
    { title: 'Title 4' },
    { title: 'Title 5' },
    { title: 'Title 6' },
  ];
</script>
